<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/19
  Time: 14:23
  To change this template use File | Settings | File Templates.
--%>
<%@page contentType="text/html;charset=utf-8" isELIgnored="false" pageEncoding="UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>学生列表</title>
    <link href="layui/css/layui.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: "#myTable",//一般都是写id选择器
                url: "selectAll.do", //数据接口;请求地址
                page: true,//开启分页,

                toolbar:"#myToolbar",//id选择器的写法

                limit:10,
                limits:[10,80,100,900],
                title:"学生列表",

                //列
                cols: [[
                    {type:"checkbox"},
                    {title:"编号",field:"studentId"},
                    {title:"姓名",field:"studentName"},
                    {title:"年龄",field:"age"},
                    {title:"性别",field:"gender",templet:"#genderTemplet"},
                    // 列格式化templet:"#priceTemplet"
                    {title:"操作",templet:"#caoZuo"}
                ]]
            });

        });
        layui.use(["form","layer","table"],function () {
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;

            // form.verify({
            //     bookName:function(value,item){
            //         var bookNameReg=/^\w{1,}$/;
            //         if(!bookNameReg.test(value)){
            //             return "请输入正确的书名";
            //         }
            //     },
            //
            //     price:[
            //         /^[1-9]\d*(\.\d{1,2})?$/,
            //         "请输入正确的价格"
            //     ]
            //     /*price:function(value,item){
            //
            //         var priceReg=/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
            //         if(!priceReg.test(value)){
            //             return "请输入正确的价格";
            //         }
            //     }*/
            // });


            //当点击提交按钮的时候，会进入到这个函数
            //当所有的验证都通过时，才会进入到这个函数
            // form.on("submit(add)",function(data){
            //     //console.log(data);
            //
            //     $.ajax({
            //         url:"insert.do",
            //         data:data.field,
            //         type:"post",
            //         success:function(data){
            //             //console.log(data)
            //             //1.关闭掉添加弹出层
            //             layer.closeAll('page');
            //
            //             //2.提示添加成功
            //             if(data.isAdd){
            //                 layer.alert("添加成功",{time:3000});
            //             }else{
            //                 layer.alert("添加失败",{time:3000});
            //             }
            //
            //             //3.刷新table
            //             table.reload("myTable");
            //
            //
            //         }
            //     })
            //     // return false;//阻止跳转；
            // })
            form.on("submit(update)",function (data) {
                console.log(data.field);
                $.ajax({
                    url:"update.do",
                    data:data.field,
                    type:"post",
                    success:function (data) {
                        //1.关闭提示层
                        layer.closeAll("page");
                        //2.提示添加成功
                        if(data.isUpdate){
                            layer.alert("修改成功",{time:1500});
                        }else {
                            layer.alert("修改失败",{time:1500});
                        }
                        //3.刷新table
                        table.reload("myTable")
                    }
                })
                return false;
            })
        })
        //搜索操作
        function doSearch() {
            //1.获取到输入框中输入的内容
            var studentName = $("#studentName").val();
            //alert(bookName)

            //发送请求，并且接收数据
            layui.use('table', function() {
                var table = layui.table;

                table.reload('myTable', {
                    // 发送额外参数
                    where: {"studentName":studentName}
                });
            });
        }
        function toOpenUpdateLayer(studentId) {
            // alert(studentId)
            //1.获取当前行数据===》发送ajax请求，获取当前行数据

            //2.把数据填充到修改弹出层中==>弹出层显示

            //3.提交表单

            //4.接收后台修改响应回来的数据；关闭弹出层、提示修改信息、刷新table


            //1.
            $.ajax({
                url:"selectOne.do",
                data:"studentId="+studentId,
                success:function(data){
                    $("#studentId").val(data.studentId);
                    $("#name").val(data.studentName);
                    $("#age").val(data.age);
                    $("#gender").val(data.gender);
                }
            });

            // $("#addSubmitBtn").hide();
            $("#updateSubmitBtn").show();

            //2.
            layui.use('layer', function(){
                layer.open({
                    title:"修改信息",
                    content:$("#addForm"),
                    type:1,
                    maxmin:true
                })
            });
        }
        //添加弹出层
        // function toOpenAddLayer() {
        //     layui.use('layer', function(){
        //
        //         layer.open({
        //             title:"添加城市",
        //             content:$("#addForm"),
        //             type:1,
        //             maxmin:true
        //         })
        //     });
        //
        // }
        function doMultiDelete() {
            //获取到选中的内容的id===》table模块中找方法

            layui.use(['layer','table'], function() {
                var table = layui.table;

                //获取到选中的数据
                var checkStatus = table.checkStatus('myTable'); //idTest 即为基础参数 id 对应的值
                //console.log(checkStatus.data) //获取选中行的数据
                var data= checkStatus.data;

                if(data.length==0){
                    layer.alert("请选中要删除的数据");
                }else{
                    layer.confirm("确定要删除选中的所有数据",function(index){

                        //把所有选中的数据的id封装到一个数组中
                        var ids = new Array(data.length);
                        for(var i=0;i<ids.length;i++){
                            ids[i]=data[i].studentId;
                        }

                        //执行删除操作
                        $.ajax({
                            url:"multiDelete.do",
                            data:"ids="+ids,
                            success:function(data){

                                //删除确认框关闭掉
                                layer.close(index);

                                //删除提示
                                layer.alert(data.isMultiDelete,{time:2000});

                                //刷新table
                                table.reload("myTable");
                            }
                        })
                    });
                }
            });


        }
    </script>
    <script id="genderTemplet" type="text/html">
        {{#  if(d.gender==1){ }}
        <span >男</span>
        {{#  } else { }}
         女
        {{#  } }}
    </script>
    <script id="caoZuo" type="text/html">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.studentId}}')">修改</button>
        <button type="button" class="layui-btn layui-btn-danger">删除</button>
    </script>
</head>
<body>
<table id="myTable" lay-data="{id: 'myTable'}"></table>

<div id="myToolbar" style="display: none;">
    <button type="button" class="layui-btn" onclick="toOpenAddLayer()">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <button type="button" class="layui-btn  layui-btn-radius layui-btn-danger" onclick="doMultiDelete()">
        <i class="layui-icon layui-icon-delete"></i> 批量删除
    </button>

    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" class="layui-input" id="studentName">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <button type="button" class="layui-btn layui-btn-normal" onclick="doSearch()">
                <i class="layui-icon layui-icon-search"></i> 搜索
            </button>
        </div>
    </div>
</div>
<form id="addForm" style="display: none" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-block">
            <input name="studentId" id="studentId" class="layui-input" value="0" readonly/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input name="studentName" id="name" class="layui-input" placeholder="请输入姓名" lay-verify="required|studentName"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
            <input name="age" id="age" class="layui-input" placeholder="请输入年龄" lay-verify="required|age"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="1" title="男">
                <input type="radio" name="gender" value="0" title="女" checked>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <button lay-submit type="button" lay-filter="update" class="layui-btn" id="updateSubmitBtn">修改</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
<%--<form id="addForm" style="display: none" class="layui-form">--%>
    <%--<div class="layui-form-item">--%>
        <%--<label class="layui-form-label">代号</label>--%>
        <%--<div class="layui-input-block">--%>
            <%--<input name="code" class="layui-input" placeholder="请输入城市代号" lay-verify="required|code"/>--%>
        <%--</div>--%>
    <%--</div>--%>
    <%--<div class="layui-form-item">--%>
        <%--<label class="layui-form-label">城市名</label>--%>
        <%--<div class="layui-input-block">--%>
            <%--<input name="cityName" class="layui-input" placeholder="请输入城市名称" lay-verify="required|cityName"/>--%>
        <%--</div>--%>
    <%--</div>--%>
    <%--<div class="layui-form-item">--%>
        <%--<button lay-submit type="button" lay-filter="add" class="layui-btn">添加城市</button>--%>
        <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
    <%--</div>--%>
<%--</form>--%>
</body>
</html>
